// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput,InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import ScrollableTabView from 'react-native-scrollable-tab-view';

// antd 按需加载
import { InputItem, Tabs, Toast, Portal, List, Picker } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { deliveryAddressInsert, region } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, ScrollableTabBar } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, borderBottom, hotTextColor , defaultDataList,onEndReached,onRefresh ,concatDataList,defaultPage} from '../../util/utils.js'

class CreatAddress extends Component {

  constructor(props) {
    super(props)
    this.state = {
      province: [],
      provinceId: '请选择',
      provinceName: '',
      cityId: '请选择',
      cityName: '',
      areaId: '请选择',
      areaName: '',
      townId: '请选择',
      townName: '',
    }
  }


  componentDidMount() {
    this.region()
  }

  region(value) {
    let { province } = this.state
    let pid = ''
    if (!value) {
      pid = 0
    } else {
      pid = value[value.length - 1]
    }
    console.log(value, 23222222)
    if (value && value.length && value.length >= 4) {
      return
    }

    region({ pid }).then(res => {
      console.log(res, 122)
      let list = res.data.map((item, index) => {
        return {
          value: item.id,
          label: item.name,
        }
      })
      if (!value) {
        province = list
      } else if (value.length == 1) {
        province.map((provinceItem, provinceIndex) => {
          if (provinceItem.value == pid) {
            province[provinceIndex].children = list
          }
        })
      } else if (value.length == 2) {
        province.map((provinceItem, provinceIndex) => {
          if (provinceItem.children) {
            provinceItem.children.map((cityItem, cityIndex) => {
              if (cityItem.value == pid) {
                province[provinceIndex].children[cityIndex].children = list
              }
            })
          }
        })
      } else if (value.length == 3) {
        province.map((provinceItem, provinceIndex) => {
          provinceItem.children.map((cityItem, cityIndex) => {
            if (cityItem.children) {
              cityItem.children.map((areaItem, areaIndex) => {
                if (areaItem.value == pid) {
                  province[provinceIndex].children[cityIndex].children[areaIndex].children = list
                }
              })
            }
          })
        })
      }

      console.log(province)
      this.setState({
        province: [...province]
      })
    })
  }

  // 新增收货地址 /delivery/address/insert
  deliveryAddressInsert() {
    if (!this.provinceId) {
      Toast.info('请填写所在地区', 1, null, false);
      return
    }
    if (!this.detailAddress) {
      Toast.info('请填写详细地址', 1, null, false);
      return
    }
    if (!this.consignee) {
      Toast.info('请输入联系人姓名', 1, null, false);
      return
    }
    if (!this.phone) {
      Toast.info('请输入手机号', 1, null, false);
      return
    }
    if (!validation.phone(this.phone)) {
      Toast.info('请输入9-11位手机号', 1, null, false);
      return;
    }
    if (!this.email) {
      Toast.info('请输入邮箱', 1, null, false);
      return
    }
    if (!validation.email(this.email)) {
      Toast.info('请输入正确的邮箱', 1, null, false);
      return
    }
    if (!this.postCode) {
      Toast.info('请输入邮政编码', 1, null, false);
      return
    }
    deliveryAddressInsert(options).then(res => {

    })
  }


  render() {
    const { province, provinceId, cityId, areaId, townId, } = this.state
    console.log(this, 1111111)
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="新增收货地址"
          back={true}
        />
        <ScrollView style={Style.content}>
          <View style={{ paddingLeft: 15 }}>
            <TextInput
              ref={(r) => this.consignee = r}
              keyboardType="numeric"
              placeholder="姓名"
              placeholderTextColor="#61676F"
              style={{
                height: 50,
                lineHeight: 50,
                padding: 0,
                paddingRight: 15,
                color: '#333',
                fontSize: 14,
                ...borderBottom()
              }}
              underlineColorAndroid="transparent"
            />
            <TextInput
              ref={(r) => this.phone = r}
              keyboardType="numeric"
              placeholder="手机号码"
              placeholderTextColor="#61676F"
              style={{
                height: 50,
                lineHeight: 50,
                padding: 0,
                paddingRight: 15,
                color: '#333',
                fontSize: 14,
                ...borderBottom()
              }}
              underlineColorAndroid="transparent"
            />
            <Picker
              data={province}
              cols={4}
              value={[provinceId, cityId, areaId, townId]}
              onChange={(value) => {
                console.log(value)
              }}
              onPickerChange={(value, index) => {
                this.region(value)
              }}
            >
              <TouchableOpacity style={{
                height: 50,
                padding: 0,
                paddingRight: 15,
                ...borderBottom()
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 50, }}>省份，市区，乡镇</Text>
              </TouchableOpacity>
            </Picker>
            <TextInput
              ref={(r) => this.detailAddress = r}
              keyboardType="numeric"
              placeholder="请填写详细地址"
              placeholderTextColor="#61676F"
              style={{
                height: 50,
                lineHeight: 50,
                padding: 0,
                paddingRight: 15,
                color: '#333',
                fontSize: 14,
                ...borderBottom()
              }}
              underlineColorAndroid="transparent"
            />
          </View>
          <View style={{ padding: 15 }}>
            <TouchableOpacity
              onPress={() => {
                this.deliveryAddressInsert()
              }}
              style={{
                paddingVertical: 14,
                paddingHorizontal: 20,
                backgroundColor: hotTextColor,
                borderRadius: 6,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>添加地址</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View >
    );
  }
}

// <ScrollableTabView
//         // initialPage={index}
//         // tabBarPosition="overlayTop"
//         renderTabBar={() => <ScrollableTabBar activeTextColor="#000000" inactiveTextColor="#000" style={{ borderBottomColor: 'transparent' }} />}
//         tabBarBackgroundColor="#fff"
//         tabBarTextStyle={{
//           fontSize: 14,
//         }}
//         tabBarUnderlineStyle={{
//           backgroundColor: '#000000',
//           height: 2
//         }}
//         style={{
//           backgroundColor: '#fff',
//           borderColor: 'transparent',
//           height: 800,
//           width: ScreenWidth
//         }}
//       >
//         {catyValue.map((item, index) => (
//           <View style={{}} key={index} tabLabel={selectValue[index].name || '请选择'}>

//           </View>
//         ))}
//       </ScrollableTabView>


export default connect(({ user }) => ({
  user,
}))(pureRender(CreatAddress))
